<template>
  <Button v-bind="getBindValue" :class="getButtonClass">
    <template #icon>
      <!-- 此处兼容Button的slot -->
      <slot name="icon"></slot>
    </template>
    <template #default>
      <Icon :icon="props.preIcon" v-if="props.preIcon" :size="props.iconSize" />
      <slot></slot>
      <Icon
        v-if="props.postIcon"
        :icon="props.postIcon"
        :size="props.iconSize"
      />
    </template>
  </Button>
</template>

<script setup>
import { Button } from "ant-design-vue";
import { computed, unref, useAttrs } from "vue";
import Icon from "@/components/Icon/Icon.vue";

defineOptions({
  name: "AButton",
  extends: Button,
});

const props = defineProps({
  color: {
    type: String,
    validator: (v) =>
      ["primary", "error", "warning", "success", ""].includes(v),
    default: "",
  },
  loading: { type: Boolean },
  disbaled: { type: Boolean },
  preIcon: { type: String },
  postIcon: { type: String },
  iconSize: { type: Number, default: 14 },
  onClick: { type: [Function, Array], default: null },
  text: { type: String },
});

const attrs = useAttrs({ excludeDefaultKeys: false });

// 整合 class
const getButtonClass = computed(() => {
  const { color, disabled } = props;
  return [
    {
      [`ant-btn-${color}`]: !!color,
      [`is-disabled`]: disabled,
    },
  ];
});

// 整合props 进行传递
const getBindValue = computed(() => ({ ...unref(attrs), ...props }));
</script>
